import Magix, { Magix5 } from '../lib/magix';
import Agent from '../lib/agent';
import Config from '../config/index';
//apps配置
import LocalApps from '../plugins/app';
//let AppsMap = Magix.toMap(Apps, 'appId');
'ref@:./theme/index.css';
import DialogCtrl from './ctrl';

let Apps;
let AppsMap;




export default Magix.View.extend({
    tmpl: '@:./icon.html',
    async init() {
       
        //本地数据开关
        if(Config.MODE=='local'){
            Apps = LocalApps;
        
        }else{
            //改为远程加载
            let json = await Agent.request(`${Config.ICONSERVER}`,0,false,'utf-8');
            Apps = JSON.parse(json);
        }
        
       
        //排序
        Apps.sort(({order:x=0},{order:y=0})=>y-x)
        AppsMap = Magix.toMap(Apps, 'appId');
        
        let root = getComputedStyle(document.body);
        let width = parseInt(root.getPropertyValue('@:scoped.style:--scoped-icon_width'), 10);
        let height = parseInt(root.getPropertyValue('@:scoped.style:--scoped-icon_height'), 10);
        let gap = parseInt(root.getPropertyValue('@:scoped.style:--scoped-icon_gap'), 10);
        let taskbarHeight = parseInt(root.getPropertyValue('@:scoped.style:--scoped-taskbar_height'));
        this['@:{icon.width}'] = width;
        this['@:{icon.height}'] = height;
        this['@:{icon.gap}'] = gap;
        this['@:{taskbar.height}'] = taskbarHeight;

        let { params } = Magix.parseUrl(location.href);
        if (params.open) {
            let opens = params.open.split(',');
            for (let o of opens) {
                let i = AppsMap[o];
                if (i) {
                    DialogCtrl["@:{create}"](this, i);
                }
            }
        }
        this.render();
    },
    '@:{set.size}'() {
        let width = this['@:{icon.width}'];
        let height = this['@:{icon.height}'];
        let gap = this['@:{icon.gap}'];
        let taskbarHeight = this['@:{taskbar.height}'];
        let viewportHeight = document.body.clientHeight - taskbarHeight;
        let startX = gap;
        let startY = gap;
        let items = [];
       
        for (let e of Apps) {
            items.push({
                app: e,
                left: startX,
                top: startY
            });
            let nextY = startY + height + gap;
            if (nextY + height >= viewportHeight) {
                nextY = gap;
                startX += width + gap;
            }
            startY = nextY;
        }
        this.set({
            items
        });
    },
   render() {
        if(Apps){
            this['@:{set.size}']();
            this.digest();
        }
      
    },
    '@:{open.by.icon}<click>'(e: Magix5.MagixMouseEvent) {
        let { app } = e.params;
        if (app.url) {
            if(app.target == 'self'){
                DialogCtrl["@:{create}"](this, app);
            }else{
                window.open(app.url);
            }
            
        } else {
            DialogCtrl["@:{create}"](this, app);
        }
    },
    '$win<resize>'() {
        this.render();
    },
    'ef<contextmenu>&{capture:false}'(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});